/* eslint-disable react-native/no-inline-styles */
import React, {useState, createElement, cloneElement} from 'react';
import {Dimensions} from 'react-native';
import {View, TextField, Colors} from 'react-native-ui-lib';
import AntdIcons from 'react-native-vector-icons/AntDesign';
import OcticonsIcons from 'react-native-vector-icons/Octicons';
import FontAwesomeIcons from 'react-native-vector-icons/FontAwesome';

const allIcons = {
  OcticonsIcons,
  FontAwesomeIcons,
};

let {width, height} = Dimensions.get('window');

function Input(props) {
  let {
      value,
      onChange,
      placeholder,
      allowClear,
      lefticon,
      type,
      size,
      leftdom,
      containerStyle,
    } = props,
    [see, setsee] = useState(type === 'password');

  let inputprops = {
    ...props,
    validationMessagePosition: 'bottom',
    secureTextEntry: see,
    placeholder,
    value,
    onChangeText: onChange,
    placeholderTextColor: Colors.subbodyColor,
    color: Colors.colorTextBase,
  };

  return (
    <View
      row
      center
      width={props?.containwidth ?? width / 1.2}
      style={{
        backgroundColor: Colors.cardbackgroundColor,
        ...containerStyle,
        borderRadius: 10,
        overflow: 'hidden',
        paddingHorizontal: size === 'small' ? 10 : 12,
        paddingVertical: size === 'small' ? 4 : 12,
      }}>
      {leftdom}
      {lefticon &&
        (lefticon?.type ? (
          createElement(allIcons[lefticon.type + 'Icons'], {
            name: lefticon.name,
            size: 18,
            style: {
              color: Colors.headingColor,
              marginRight: 8,
              justifyContent: 'center',
            },
          })
        ) : (
          <AntdIcons
            name={lefticon}
            size={18}
            style={{
              color: Colors.headingColor,
              marginRight: 8,
              justifyContent: 'center',
            }}
          />
        ))}
      <View flex-1 style={{overflow: 'hidden'}}>
        <TextField {...inputprops} keyboardAppearance="dark" />
      </View>
      {allowClear && !!value && (
        <AntdIcons
          name="closecircle"
          size={16}
          style={{
            color: Colors.subheadingColor,
            marginLeft: 6,
            justifyContent: 'center',
          }}
          onPress={() => {
            onChange(null);
          }}
        />
      )}

      {type === 'password' && (
        <OcticonsIcons
          name={!see ? 'eye' : 'eye-closed'}
          size={20}
          style={{
            color: Colors.subheadingColor,
            marginLeft: 10,
            justifyContent: 'center',
          }}
          onPress={() => {
            setsee(!see);
          }}
        />
      )}
    </View>
  );
}

export default Input;
